<template>
	<el-main style="padding: 0 20px">
		<el-descriptions :column="1" border size="small">
			<el-descriptions-item label="请求接口">{{ data.url }}</el-descriptions-item>
			<el-descriptions-item label="请求方法">{{ data.type }}</el-descriptions-item>
			<el-descriptions-item label="状态代码">{{ data.code }}</el-descriptions-item>
			<el-descriptions-item label="日志名">{{ data.name }}</el-descriptions-item>
			<el-descriptions-item label="日志时间">{{ data.time }}</el-descriptions-item>
		</el-descriptions>
		<el-collapse v-model="activeNames" style="margin-top: 20px">
			<el-collapse-item title="常规" name="1">
				<el-alert
					title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。"
					:type="typeMap[data.level]"
					:closable="false"
				></el-alert>
			</el-collapse-item>
			<el-collapse-item title="详细" name="2">
				<div class="code">
					Request: { User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
					Chrome/86.0.4240.198 Safari/537.36" }, Response: { Content-Type: "application/json; charset=utf-8", Date:
					"Fri, 25 Jun 2021 03:02:14 GMT", Server: "nginx/1.17.8" }
				</div>
			</el-collapse-item>
		</el-collapse>
	</el-main>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			activeNames: ['1'],
			typeMap: {
				info: 'info',
				warn: 'warning',
				error: 'error'
			}
		}
	},
	methods: {
		setData(data) {
			this.data = data
		}
	}
}
</script>

<style scoped>
.code {
	background: #848484;
	padding: 15px;
	color: #fff;
	font-size: 12px;
	border-radius: 4px;
}
</style>
